<template>
    <el-col :span="12">
        <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            style="width: 240px; margin-right: 60px;" :default-openeds="openedDepartments">
            <!-- 一级部门 -->
            <template v-for="department in departmentList">
                <!-- 有子部门的渲染为submenu -->
                <el-submenu v-if="department.children && department.children.length"
                    :key="'dep-' + department.departmentId" :index="'dep-' + department.departmentId">
                    <template slot="title">
                        <i class="el-icon-office-building"></i>
                        <span>{{ department.departmentName }}</span>
                    </template>

                    <!-- 二级子部门 -->
                    <template v-for="child in department.children">
                        <!-- 子部门渲染为submenu（准备加载医生） -->
                        <el-submenu :key="'child-' + child.departmentId" :index="'child-' + child.departmentId"
                            @mouseenter.native="loadDoctors(child.departmentId)">
                            <template slot="title">
                                <i class="el-icon-s-management"></i>
                                <span>{{ child.departmentName }}</span>
                            </template>

                            <!-- 三级医生列表 -->
                            <template v-if="doctorMap[child.departmentId]">
                                <el-menu-item v-for="doctor in doctorMap[child.departmentId]"
                                    :key="'doc-' + doctor.doctorId" :index="'doc-' + doctor.doctorId"
                                    @click="selectDoctor(doctor.doctorId)">
                                    <i class="el-icon-user-solid"></i>
                                    <span>{{ doctor.doctorName }}</span>
                                    <el-tag v-if="doctor.title" size="mini" type="info" style="margin-left: 8px;">
                                        {{ doctor.title }}
                                    </el-tag>
                                </el-menu-item>
                            </template>

                            <!-- 加载状态 -->
                            <el-menu-item v-else disabled>
                                <i class="el-icon-loading"></i>
                                <span>加载中...</span>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </el-col>
</template>

<script>
import { queryDepartments, queryDoctorsByCId } from '@/api/comments/comments.js'

export default {
    data() {
        return {
            departmentList: [],
            doctorMap: {}, // 存储各子部门对应的医生列表 { departmentId: [doctors] }
            openedDepartments: [], // 默认展开的部门
            loadingDepartments: {} // 记录正在加载的部门
        }
    },
    mounted() {
        this.loadDepartments()
    },
    methods: {
        // 加载部门数据
        async loadDepartments() {
            try {
                const res = await queryDepartments()
                if (res.code === 200) {
                    this.departmentList = res.rows
                    // 默认展开第一个部门
                   /*  if (this.departmentList.length > 0) {
                        this.openedDepartments = ['dep-' + this.departmentList[0].departmentId]
                    } */
                } else {
                    this.$message.error('获取部门列表失败')
                }
            } catch (err) {
                console.error(err)
                this.$message.error('获取部门列表异常')
            }
        },

        // 加载医生数据
        async loadDoctors(departmentId) {
            //console.log("id", departmentId)
            let temp = {
                departmentId: departmentId
            }
            await queryDoctorsByCId(temp).then(res => {
                //console.log(res);
                if (res.code == 200) {
                    this.$set(this.doctorMap, departmentId, res.rows)
                }

            })
        },
        //发送医生id给子组件
        selectDoctor(doctorId){
            this.$emit('doctor-selected', doctorId)
        },

        handleOpen(key) {
            /* //console.log('菜单展开:', key)
            // 如果是子部门被展开，提取departmentId
            if (key.startsWith('child-')) {
              const departmentId = key.replace('child-', '')
              this.loadDoctors(departmentId)
            } */
        },

        handleClose(key) {
            console.log('菜单关闭:', key)
        }
    }
}
</script>

<style scoped>
.el-menu-vertical-demo {
    border-right: none;
    height: 100%;
}

.el-menu-item [class^=el-icon-] {
    margin-right: 8px;
}

.el-tag {
    margin-left: 8px;
}
</style>